<template>
	<div class="mt-13">
		<base-text textT="reset.step2Title" class="text-lg" block></base-text>
		<base-tip :text="text" class="mt-2" hideIcon></base-tip>
		<div ref="inputListRef" class="mt-16 flex justify-between">
			<input
				v-for="index in 6"
				:key="index"
				type="text"
				maxlength="1"
				class="w-10 bg-transparent border-x-0 border-t-0 border-b border-border-3 focus:border-primary caret-primary outline-none text-center text-[20px] pb-3 text-t-1 transition-all"
				@keydown="onInput($event, index - 1)" />
		</div>
		<base-input-error class="mt-1" :code="errorCheckCode?.code"></base-input-error>
		<base-loading
			v-if="loadingCheckCode || loadingSendCode"
			class="mt-4 text-center"
			block></base-loading>
		<div
			v-else
			class="mt-3 text-center"
			:class="countdown > 0 ? 'text-t-3 cursor-not-allowed' : 'text-primary cursor-pointer'"
			@click="onResend">
			{{ $t('action.resendCode') }}
			<div v-if="countdown > 0" class="inline-block w-10">{{ countdown }} s</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { BaseInputError, BaseLoading, BaseText, BaseTip } from '@/components/base'
import { checkCode, getCountDown, sendCode } from '@/api/assistants'
import { useRequest, useCountdown } from '@/hooks'
import { t } from '@/utils'
import { computed, inject, Ref, ref } from 'vue'
import { CodeParams } from '@/types'

const params = inject<Ref<CodeParams>>('params')

const emits = defineEmits(['next'])

const text = computed(() => t('reset.step2Subtitle') + ' ' + params?.value.nameData)

const inputListRef = ref<HTMLInputElement>()

let code: string

const onInput = (event: KeyboardEvent, index: number) => {
	const inputList = Array.from(inputListRef.value!.children)
	const { key } = event
	if (/\d/.test(key)) {
		const currInput: any = inputList[index]
		if (index < inputList.length - 1) {
			const input: any = inputList[index + 1]
			setTimeout(() => input.focus())
		}
		setTimeout(() => {
			code = inputList.reduce((prev, item: any) => prev + item.value, '')
			if (code.length === 6) {
				currInput.blur()
				runCheckCode({
					...params?.value,
					code
				})
			}
		})
	} else if (key === 'Backspace') {
		if (index > 0) {
			const currInput: any = inputList[index]
			const currValue = currInput.value
			setTimeout(() => {
				if (currValue) {
					currInput.value = ''
				} else {
					const prevInput: any = inputList[index - 1]
					prevInput.focus()
					prevInput.value = ''
				}
			})
		}
	} else {
		event.preventDefault()
	}
}

const { loading: loadingSendCode, run: runSendCode } = useRequest(sendCode, {
	showSuccess: true,
	showError: true,
	onSuccess: () => reset(60)
})

const onResend = () => {
	countdown.value === 0 && runSendCode(params?.value)
}

const {
	loading: loadingCheckCode,
	error: errorCheckCode,
	run: runCheckCode
} = useRequest(checkCode, {
	onSuccess: () => emits('next', { code })
})

const { countdown, reset } = useCountdown()

const init = async () => {
	try {
		const { data } = await getCountDown({
			type: params?.value.type,
			codeType: params?.value.codeType,
			path: 'sendCode'
		})
		reset(data.countdown)
	} catch (error) {}
}

init()
</script>
